<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        margin: 0 auto;
        width: 700px;
      }
      .goodsimg {
        width: 80px;
        height: 80px;
      }
      .goodsnum {
        width: 50px;
        text-align: center;
      }
      .foot {
        width: 700px;
        margin: 0 auto;
        position: relative;
      
        &>span , button{
            position: absolute;
           
        }
        .del {
            left: 0;
            top: 10px;
        }
        .delcart {
            left: 150px;
            top: 10px;
        }
        .setnum {
            right: 150px;
            top: 10px;
        }
        .goby {
            right: 0;
            background-color: red;
            padding: 10px 20px;
            border: 0;
            color: white;
        }
      }
    </style>
  </head>
  <body>
    <table class="box">
      <thead>
        <tr>
          <th><input class="allchecked" onclick="setallselect(this)" type="checkbox" name="" id="" />全选</th>
          <th>商品</th>
          <th>单价</th>
          <th>数量</th>
          <th>小计</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th><input class="checked" type="checkbox" name="" id="" /></th>
          <th>
            <img
              class="goodsimg"
              src="https://s21.ax1x.com/2024/03/12/pF6I7nS.png"
              alt=""
            /><br />牛奶
          </th>
          <th>￥<span>15</span></th>
          <th>
            <button class="min">-</button
            ><input class="goodsnum" value="1" type="text" />
            <button class="max">+</button>
          </th>
          <th>￥<span class="all">0</span></th>
          <th onclick="deldom(this)">删除</th>
        </tr>
        <tr>
          <th><input  class="checked" type="checkbox" name="" id="" /></th>
          <th>
            <img
              class="goodsimg"
              src="https://s21.ax1x.com/2024/03/12/pF6I7nS.png"
              alt=""
            /><br />牛奶
          </th>
          <th>￥<span>25</span></th>
          <th>
            <button class="min">-</button
            ><input class="goodsnum" value="1" type="text" />
            <button class="max">+</button>
          </th>
          <th>￥<span class="all">0</span></th>
          <th onclick="deldom(this)">删除</th>
        </tr>
        <tr>
          <th><input  class="checked" type="checkbox" name="" id="" /></th>
          <th>
            <img
              class="goodsimg"
              src="https://s21.ax1x.com/2024/03/12/pF6I7nS.png"
              alt=""
            /><br />牛奶
          </th>
          <th>￥<span>35</span></th>
          <th>
            <button class="min">-</button
            ><input class="goodsnum" value="1" type="text" />
            <button class="max">+</button>
          </th>
          <th>￥<span class="all">0</span></th>
          <th onclick="deldom(this)">删除</th>
        </tr>
        <tr>
          <th><input  class="checked" type="checkbox" name="" id="" /></th>
          <th>
            <img
              class="goodsimg"
              src="https://s21.ax1x.com/2024/03/12/pF6I7nS.png"
              alt=""
            /><br />牛奶
          </th>
          <th>￥<span>45</span></th>
          <th>
            <button class="min">-</button
            ><input class="goodsnum" value="1" type="text" />
            <button class="max">+</button>
          </th>
          <th>￥<span class="all">0</span></th>
          <th onclick="deldom(this)">删除</th>
        </tr>
        <tr>
          <th><input  class="checked" type="checkbox" name="" id="" /></th>
          <th>
            <img
              class="goodsimg"
              src="https://s21.ax1x.com/2024/03/12/pF6I7nS.png"
              alt=""
            /><br />牛奶
          </th>
          <th>￥<span>55</span></th>
          <th>
            <button class="min">-</button
            ><input class="goodsnum" value="1" type="text" />
            <button class="max">+</button>
          </th>
          <th>￥<span class="all">0</span></th>
          <th onclick="deldom(this)">删除</th>
        </tr>
      </tbody>
    </table>
    <div class="foot">
      <span class="del" onclick="delopengoods()">删除所选商品</span>
      <span class="delcart" onclick="clearcart()">清理购物车</span>
      <span class="setnum">选择<span class="nums" style="color: red;">4</span>件商品总价<span class="price" style="color: red;">￥70</span></span>
      <button class="goby">去结算</button>
    </div>
    <!-- 1.单行删除元素 -->
     <!-- 2.步进器加减操作 -->
      <!-- 3.小计 -->

      <!-- 单条选中 -->
       <!-- 全选中 -->
        <!-- 计算总数和总价 -->
         <!-- 清理购物车  t0-->
          <!-- 删除选中 -->
    <script>

        // 删除方法
        function deldom(t) {
            t.parentNode.remove()
            
        }
        // 数量加减
        let max = document.querySelectorAll('.max')
        let min = document.querySelectorAll('.min')

        max.forEach(item=>{
            item.onclick = function(){
            
                let val = Number(this.parentNode.children[1].value)
                this.parentNode.children[1].value = val+1
                let price = this.parentNode.parentNode.children[2].children[0].innerHTML
                this.parentNode.parentNode.children[4].children[0].innerHTML = price*val
            }
        })
        min.forEach(item=>{
            item.onclick = function(){
            
                let val = Number(this.parentNode.children[1].value)
                this.parentNode.children[1].value = val?val-1:0
                let price = this.parentNode.parentNode.children[2].children[0].innerHTML
                this.parentNode.parentNode.children[4].children[0].innerHTML = price*val
                
            }
        })
        // 选中
        let checked = document.querySelectorAll('.checked')

        checked.forEach(item=>{
            item.onclick = function(){
                let type = this.checked
                if (type) {
                    // 获取单价
                let price = this.parentNode.parentNode.children[2].children[0].innerHTML
                let val = this.parentNode.parentNode.children[3].children[1].value
                this.parentNode.parentNode.children[4].children[0].innerHTML = price*val
                }else{
                    this.parentNode.parentNode.children[4].children[0].innerHTML = 0

                }
                setnum()
                
            }
        })

        // 全选

        let checkedall = document.querySelector('.allchecked')
        checkedall.onclick = function(){
            let type = this.checked
            let checked = document.querySelectorAll('.checked')
            checked.forEach(item=>{
                item.checked = type
                if (type) {
                    // 获取单价
                let price = item.parentNode.parentNode.children[2].children[0].innerHTML
                let val = item.parentNode.parentNode.children[3].children[1].value
                item.parentNode.parentNode.children[4].children[0].innerHTML = price*val
                
                }else{
                    item.parentNode.parentNode.children[4].children[0].innerHTML = 0

                }

              


            })
            setnum()
        }
 
  function setnum(params) {
     // 计算总价和数量
  let allnum = 0
  let allprice = 0
    let checked = document.querySelectorAll('.checked')
    checked.forEach(item=>{
        if (item.checked) {
            let val = item.parentNode.parentNode.children[3].children[1].value*1
            allnum+= val
            let price = item.parentNode.parentNode.children[2].children[0].innerHTML
           
            allprice+= price*val
        }else{

        }
    })
    document.querySelector('.nums').innerHTML = allnum
    document.querySelector('.price').innerHTML=allprice
    
  }


      
    </script>
  </body>


</html>
